<template>
  <div>
    <span class="inline">
      <el-select
        v-model="currentValue"
        filterable
        remote
        clearable
        placeholder="请选择规格"
        :remote-method="querySearchAsync"
        :loading="loading"
        @change="handleSelect"
        style="width: 100%"
      >
        <el-option
          v-for="item in datas"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          <slot>
            <span style="float: left">{{ item.name }}</span>
          </slot>
        </el-option>
      </el-select>
    </span>
    =
    <span class="inline">
      <el-select
        v-model="value.value"
        filterable
        clearable
        placeholder="请选择值"
        style="width: 100%"
      >
        <el-option
          v-for="item in values"
          :key="item"
          :label="item"
          :value="item">
          <slot>
            <span style="float: left">{{ item }}</span>
          </slot>
        </el-option>
      </el-select>
    </span>
  </div>
</template>
<script>
  import AdminService from 'src/service/admin'
  import emitter from 'src/components/emitter'

  export default {
    name: 'HSpecQuery',
    mixins: [emitter],
    data() {
      return {
        currentValue: null,
        loading: false,
        datas: [],
        search: {
          name: null,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          isShow: 1,
          status: 1,
          orderBy: 'id'
        },
        values: []
      }
    },
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    methods: {
      handleSelect(item) {
        if (item == null || item == undefined || item == "") {
          this.value.name = null;
          this.value.value = null;
          this.values = null;
        } else {
          const items = this.datas.filter(ds => {
            return ds.id == item;
          })
          console.info(items)
          this.value.name = items[0].id;
          this.value.value = null;
          this.values = items[0].values;
        }
      },
      querySearchAsync(queryString, cb) {
        const me = this
        if (queryString !== undefined && queryString != null && queryString.trim() != '') {
          me.search.name = queryString
        } else {
          me.search.name = null
        }
        me.loading = true
        AdminService.searchSpec(me.search).then(data => {
          if (data != null) {
            me.datas = data.datas
          }
          me.loading = false
        })
      }
    },
    beforeMount: function () {
      this.querySearchAsync(null)
    }
  }
</script>
